<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/font.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/xadmin.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath}/admin/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/js/xadmin.js"></script>
<!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="开始日"
									name="start" id="start">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="截止日"
									name="end" id="end">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input type="text" name="username" placeholder="请输入用户名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit="" lay-filter="sreach">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>

					<div id="app" class="layui-card-body ">
						<div class="filter-container">
							<div class="layui-card-header">
								<button class="layui-btn layui-btn-danger" onclick="delAll()">
									<i class="layui-icon"></i>批量删除
								</button>
								<el-button class="filter-item" style="margin-left: 10px;"
									type="primary" icon="el-icon-edit" @click="handleCreate">
								添加 </el-button>
							</div>

						</div>
						<el-table :data="productList" stripe style="width: 100%" class="layui-table layui-form">
						<el-table-column prop="id" label="工号" width="180" ></el-table-column> 
						<el-table-column prop="name" label="名字" width="180"></el-table-column> 
						<el-table-column prop="sex" label="性别"> </el-table-column> 
						<el-table-column prop="post" label="职位"> </el-table-column> 
						<el-table-column prop="phone" label="电话"> </el-table-column> 
						<el-table-column prop="mail" label="邮箱" width="180"> </el-table-column> 
						<el-table-column fixed="right" label="操作" width="200"> <template
							slot-scope="scope"> <el-button type="primary"
							@click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
						<el-button type="danger" @click="handledelete(scope.row)"
							size="small">删除</el-button> </template> </el-table-column> </el-table>

						<el-pagination @size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:page-sizes="[10, 20, 30, 40]" :current-page.sync="currentPage"
							:page-size="100" layout="total, sizes, prev, pager, next, jumper"
							:total="total"> </el-pagination>
						<el-dialog :title="textMap[dialogStatus]"
							:visible.sync="dialogFormVisible"> <el-form
							ref="dataForm" :model="staff" label-position="left"
							label-width="70px" style="width:400px; margin-left:50px;">
							
						<el-form-item v-if="dialogStatus=='Add'" label="工号" prop="title"> 
						 <el-input v-model="staff.id" autocomplete="off" :disabled="isAdd == true"/>
						</el-form-item>  
						<el-form-item label="名字" prop="title"> 
						<el-input v-model="staff.name" /> 
						</el-form-item> 
						<el-form-item label="性别" prop="title"> 
						<el-input v-model="staff.sex" />
						</el-form-item>  
						 <el-form-item label="职位" prop="title">
						 <el-input v-model="staff.post" /> 
						 </el-form-item>
						 <el-form-item label="联系电话" prop="title">
						 <el-input v-model="staff.phone" /> 
						 </el-form-item>
						 <el-form-item label="邮箱" prop="title">
						 <el-input v-model="staff.mail" /> 
						 </el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false"> 关闭 </el-button>
							<el-button type="primary" @click="dialogStatus==='Add'?createData():updateData()">
							提交 </el-button>
						</div>
						</el-dialog>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data : {
				
				dialogStatus:"",
				 textMap: {
				        Update: 'Update',
				        Add: 'Add'
				      },
				staff:{
					"id":"","name":"","sex":"","post":"","phone":"","mail":""}
				,
				productList : [],
				pos : 0, //坐标
				pageSize : 10, //每一页显示的数据条数
				total : 150, //记录总数
				maxPage : 99,//最大页数
				active: 1,
				currentPage:1,
				isAdd:true,
				dialogFormVisible:false
			},
			methods : {
				handleSizeChange(pageSizes){
					this.pageSize= pageSizes
					 this.pageHandler(0)
				},
				handleCurrentChange(currentPage){ 
					this.currPage = currentPage;
			        this.pageHandler((this.currPage-1)*this.pageSize)
			    },
			    createData(){
			    	 this.dialogFormVisible=true
			    	var url = "teacherAdd";
			    	var data="id="+this.staff.id+"&name="+this.staff.name+
			    	"&sex="+this.staff.sex+"&phone="+this.staff.phone+"&post="+this.staff.post+"&mail="+this.staff.mail;
			    	console.log(data);
			    	axios.post(url,data,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res =>{
			    		this.dialogFormVisible=false
			    		this.staff.id="";
				    	this.staff.name="";
				    	this.staff.sex="";
				    	this.staff.phone="";
				    	this.staff.post="";
				    	this.staff.mail="";
				    	this.currentPage=1
						this.pageHandler(0)
					}).catch(err =>{
						console.log("error");
					})
			    },
			    handleCreate(){
			    	this.dialogFormVisible=true
			    	this.dialogStatus = 'Add',
			    	this.isAdd=false
			    },
			    handleClick(row){
			    	this.dialogFormVisible=true
			    	this.dialogStatus = 'Update',
			    	console.log(row);
			    	this.staff.id=row.id;
			    	this.staff.name=row.name;
			    	this.staff.sex=row.sex;
			    	this.staff.phone=row.phone;
			    	this.staff.post=row.post;
			    	this.staff.mail=row.mail;
			    },
			    updateData(){
			    	console.log("修改")
			    	var url = "teachertUpdate";
			    	var data="id="+this.staff.id+"&name="+this.staff.name+
			    	"&sex="+this.staff.sex+"&phone="+this.staff.phone+"&post="+this.staff.post+"&mail="+this.staff.mail;
			    	console.log(data);
			    	axios.post(url,data,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res =>{
			    		this.dialogFormVisible=false
			    		this.currentPage=1
						this.pageHandler(0)
						this.staff.id="";
				    	this.staff.name="";
				    	this.staff.sex="";
				    	this.staff.phone="";
				    	this.staff.post="";
				    	this.staff.mail="";
					}).catch(err =>{
						console.log("error");
					})
			    },
			    handledelete(row){
			    	var url = "teacherDelete?id="+row.id;
					axios.get(url).then(res =>{
						this.currentPage=1
						this.pageHandler(0)
					}).catch(err =>{
						console.log("error");
					})
			    },
				//pagehandler方法 跳转到坐标
				pageHandler(pos) {	
					
					if(pos <= 0){
						pos = 0;
					}
					
					if(pos >= this.total){
						if(this.total%this.pageSize==0){
							console.log(this.total,pos);
							pos = this.total - this.pageSize;
						}else{
							console.log(this.total,pos);
							pos = this.total - this.total % this.pageSize;
						}
					}
					
					this.pos = pos;
					
					var url = "teachertList?pos="+this.pos+"&rows="+this.pageSize;
					axios.get(url).then(res =>{
						this.productList = res.data.list;
						console.log(res.data.list);
						this.total = parseInt(res.data.total);
						this.maxPage =  Math.ceil(this.total / this.pageSize);
					}).catch(err =>{
						console.log("error");
					})
				}
			},
			created () {
				//created  表示页面加载完毕，立即执行
				this.pageHandler(0);
			},
			watch:{
				'dialogFormVisible':function(){
		              if(this.dialogFormVisible==false){
		            	  this.staff.id="";
					    	this.staff.name="";
					    	this.staff.sex="";
					    	this.staff.phone="";
					    	this.staff.post="";
					    	this.staff.mail="";
		              }
		          }
			}
		});
	</script>
<script>
	layui.use([ 'laydate', 'form' ], function() {
		var laydate = layui.laydate;
		var form = layui.form;

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});
	});

	/*用户-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', function(index) {

			if ($(obj).attr('title') == '启用') {

				//发异步把用户状态进行更改
				$(obj).attr('title', '停用')
				$(obj).find('i').html('&#xe62f;');

				$(obj).parents("tr").find(".td-status").find('span').addClass(
						'layui-btn-disabled').html('已停用');
				layer.msg('已停用!', {
					icon : 5,
					time : 1000
				});

			} else {
				$(obj).attr('title', '启用')
				$(obj).find('i').html('&#xe601;');

				$(obj).parents("tr").find(".td-status").find('span')
						.removeClass('layui-btn-disabled').html('已启用');
				layer.msg('已启用!', {
					icon : 5,
					time : 1000
				});
			}

		});
	}

	
	
</script>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
</script>
</html>